<template>
  <div>
    <el-dialog title="修改名称" :visible.sync="visible" width="30%" center :close-on-click-modal="false">
      <el-input class="dialog-input" v-model="name" placeholder="请输入名称"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelButton" @click="visible = false">取 消</el-button>
        <el-button class="okButton" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { modifyChatNameToServe } from '@/api/home'
export default {
  data() {
    return {
      visible: false,
      chatHistoryId:0,
      name:''
    }
  },
  props: {
    modifyChatVisible: Boolean,
    fatherMethod:Function
  },
  model: {
    prop: 'modifyChatVisible',
    event: 'change'
  },
  watch: {
    'modifyChatVisible': {
      handler(newVal) {
        this.visible = newVal
      }
    },
    'visible': {
      handler(newVal) {
        this.$emit('change', newVal)
      }
    }
  },
  methods:{
    init(id,name){
      this.chatHistoryId=id
      this.name=name
    },
    async submit(){
      if(this.name.length>20){
        this.$message('名字不能太长')
        return
      }
      await modifyChatNameToServe(this.chatHistoryId,this.name)
      this.fatherMethod()
      this.visible=false
    }

  }
}
</script>

<style>
.el-dialog {
  border-radius: 20px !important;
  background-color: #080A0B !important;
  margin-top: 30vh !important;
}
.el-dialog__title{
  color: white !important;
  font-weight: bold;
}
.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close{
  color: white !important;
}

.dialog-input{
  background-color: #080A0B !important;
}
.cancelButton{
  width: 40%;
  margin: 0 10px !important;
  color: white !important;
  background-color: #333333 !important;
  border: none !important;
  border-radius: 20px !important;
}
.okButton{
  width: 40%;
  margin: 0 10px !important;
  color: black !important;
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 20px !important;
}
</style>